<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .main {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  table {
    border-collapse: collapse;
  }
  ​table,td,th {
    border: 1px solid black;
    padding: 5px 50px;
  }
</style>
<body>
  <div class="main">
    <h1>js练习</h1>
    <a href="https://gitee.com/xihen/JsDemo">源码地址</a>
    <table>
      <tr>
        <th>demo名称</th>
        <th>链接</th>
      </tr>
      <tr>
        <td>圆形时钟</td>
        <td><a href="./demo/time.html">预览</a></td>
      </tr>
      <tr>
        <td>canvas 电子签名</td>
        <td><a href="./demo/canvassigna.html">预览</a></td>
      </tr>
      <tr>
        <td>流光圆环效果</td>
        <td><a href="./demo/流光圆环效果.html">预览</a></td>
      </tr>
      <tr>
        <td>sticky nav吸顶效果</td>
        <td><a href="./demo/stickynva.html">预览</a></td>
      </tr>
      <tr>
        <td>box-shadow阴影效果</td>
        <td><a href="./demo/box-shadow.html">预览</a></td>
      </tr>
      <tr>
        <td>波纹按钮</td>
        <td><a href="./demo/波纹按钮.html">预览</a></td>
      </tr>
      <tr>
        <td>base64图片 加/解密</td>
        <td><a href="./demo/base64.html">预览</a></td>
      </tr>
      <tr>
        <td>banner轮播图</td>
        <td><a href="./demo/banner/banner.html">预览</a></td>
      </tr>
      <tr>
        <td>抖音文字跳动效果</td>
        <td><a href="./demo/抖音文字效果.html">预览</a></td>
      </tr>
      <tr>
        <td>圆形波浪进度</td>
        <td><a href="./demo/圆形波浪进度.html">预览</a></td>
      </tr>
      <tr>
        <td>按钮3D分层悬停效果</td>
        <td><a href="./demo/按钮3D分层悬停效果.html">预览</a></td>
      </tr>
      <tr>
        <td>拖拽排列</td>
        <td><a href="./demo/拖拽排列.html">预览</a></td>
      </tr>
    </table>
  </div>
  
</body>

</html>